<template>
  <el-button v-if="props.type === 'text'" type="text" class="copytext" @click="copy(props.copyData)">复制</el-button>
  <el-icon v-if="props.type === 'icon'" class="copy-icon" @click="copy(props.copyData)"><document-copy /></el-icon>
  <img v-if="props.type === 'customicon'" src="/static/appmarket/copy.png" @click="copy(props.copyData)" class="customicon" />
</template>
<script setup lang="ts">
  import useClipboard from 'vue-clipboard3'
  import { ElMessage } from 'element-plus'

  interface Props {
    type: string
    copyData: string
  }

  const { toClipboard } = useClipboard()
  const props = withDefaults(defineProps<Props>(), {
    type: 'text',
    copyData: ''
  })
  const copy = async (val: string) => {
    try {
      await toClipboard(val)
      ElMessage.success('复制成功')
    } catch (e) {
      ElMessage.error('复制失败')
    }
  }
</script>
<style lang="scss" scoped>
  .copytext {
    margin-left: 10px;
    font-size: 14px;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    line-height: 14px;
  }

  .copy-icon {
    margin-left: 10px;
    cursor: pointer;

    &:hover {
      color: #ff6b00;
    }
  }
  .customicon {
    cursor: pointer;
  }
</style>
